<!DOCTYPE html>
<html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    <title>右键菜单</title>
    <script src="../../../jquery.js" type="text/javascript"></script>
    <script type="text/javascript" src="../../../ui/om-core.js"></script>
    <script type="text/javascript" src="../../../ui/om-tree.js"></script>
    <script type="text/javascript" src="../../../ui/om-menu.js"></script>
    <script src="../../../ui/om-mouse.js"></script>
    <script type="text/javascript" src="../js/data.js"></script>
    <link rel="stylesheet" type="text/css" href="../../../themes/default/om-all.css" />
	<link rel="stylesheet" href="../../../demos/common/css/demo.css">
	<!-- view_source_begin -->
    <script type="text/javascript">
        $(document).ready(function(){
        	//以下节点不响应右键菜单
        	var array1 = ["直辖市(不响应右键菜单)","北京","上海","天津"];
        	var array2 = ["广东省(不可删除)","广州","深圳","东莞"];
            $("#tree").omTree({
                dataSource : cities,
                showCheckbox : true,
                onClick : function(){
                	$("#menu").omMenu("hide");
                },
                onRightClick : function(nodedata, e){
                	//通过节点的text属性来判断是否响应右键菜单，也可以自行添加特殊属性来判断
                	if($.inArray(nodedata.text, array1)===-1){
                		//右键选中并显示菜单
                		$("#tree").omTree("select", nodedata);
                		$("#menu").omMenu("enableItem", "002");
                  	    $('#menu').omMenu('show',e);
                  	    if($.inArray(nodedata.text, array2)!=-1){
                  	    	$("#menu").omMenu("disableItem", "002");
                  	    }
                	}
                	e.preventDefault(); 
                }
            });
            //左键点击页面隐藏菜单
            $("body").bind("click", function(){
            	$("#menu").omMenu("hide");
            });
            var addCount = 1;
            $('#menu').omMenu({
            	contextMenu : true,
                dataSource : [{id:'001',label:'增加节点',icon:'../images/add.png'},
                              {id:'002',label:'删除节点',icon:'../images/delete.png'},
                              {id:'003',label:'check节点',icon:'../images/check.png'},
                              {id:'004',label:'uncheck节点',icon:'../images/uncheck.png'},
                              {id:'005',label:'恢复默认',icon:'../images/refresh.png'}
                             ],
                onSelect : function(item){
                	var node = $("#tree").omTree("getSelected");
                	$("#menu").omMenu("hide");
                	if(item.id=="001"){
                		var newnode = {text:"增加"+(addCount++)};
                		$("#tree").omTree("insert",newnode, node);
                	}else if(item.id === "002"){
                		$("#tree").omTree("remove", node);
                	}else if(item.id === "003"){
                		$("#tree").omTree("check", node);
                	}else if(item.id === "004"){
                		$("#tree").omTree("uncheck", node);
                	}else if(item.id === "005"){
                		$("#tree").omTree("setData", cities);
                		$("#tree").omTree("refresh");
                	}
                }
            });
            
        });
    </script>
    <!-- view_source_end -->
    <style type="text/css">
    #tree{
     background: none repeat scroll 0 0 #fffacd;
     overflow:auto;
     height:450px; 
     width:230px; 
    }
    body{
        height:500px;    
     }
    </style>
</head>
<body>
      <!-- view_source_begin -->
	    <div id="content" class="content">
		    <div style="width:230px; border: 2px solid #a9a9a9;">
		        <ul id="tree" class="tree">
		        </ul>
		    </div>   
	    </div>
	    <div id="menu"></div>
	    <!-- view_source_end -->
	    <div id="view-desc">
        右键点击树节点会弹出右键菜单，菜单中的操作项包括：增加节点、删除节点、check节点、uncheck节点和恢复默认等。<br/>
        本示例的右键菜单使用omMenu来实现，菜单的显示和隐藏在omTree的回调函数onRightClick中实现，
        可以通过选中节点的信息来判断是否显示菜单，以及菜单中可用的操作项。
    </div> 
</body>
<script type="text/javascript" src="../../../demos/common/js/themeloader.js"></script>
</html>
